﻿@model CarouselModel
@using Nop.Plugin.Widgets.Carousel;
@using Nop.Plugin.Widgets.Carousel.Models;
@using Nop.Services.Events;
@using Nop.Core.Infrastructure;
@using Nop.Web.Framework;
@using Nop.Web.Framework.Events;
@using Nop.Web.Framework.UI;

@Html.ValidationSummary(false)
@Html.HiddenFor(model => model.Id)

<script type="text/javascript">
    $(document).ready(function () {
        $("#@Html.FieldIdFor(model => model.IsAutoRotate)").click(toggleIsAutoRotate);
        toggleIsAutoRotate();
    });

    function toggleIsAutoRotate() {
        if ($('#@Html.FieldIdFor(model => model.IsAutoRotate)').is(':checked')) {
            $('#pnlIsAutoRotate').show();
        }
        else {
            $('#pnlIsAutoRotate').hide();
        }
    }

</script>


<div id="carousel-edit">
    <ul>
        <li @Html.RenderSelectedTabIndex(0, GetSelectedTabIndex())>
            @T("Plugins.Widgets.Carousel.Info")
        </li>
        <li @Html.RenderSelectedTabIndex(1, GetSelectedTabIndex())>
            @T("Plugins.Widgets.Carousel.Pictures")
        </li>
    </ul>
    <div>
        @TabInfo()
    </div>
    <div>
        @TabPictures()
    </div>

</div>
<script>
    $(document).ready(function () {
        $("#carousel-edit").kendoTabStrip({
            animation: {
                open: {
                    effects: "fadeIn"
                }
            },
            select: tabstrip_on_tab_select
        });
    });
</script>

@{
    //custom tabs
    var eventMessage = new AdminTabStripCreated(this.Html, "carousel-edit");
    EngineContext.Current.Resolve<IEventPublisher>().Publish(eventMessage);
    foreach (var eventBlock in eventMessage.BlocksToRender)
    {
        @eventBlock
    }
}

@*save selected tab index*@
<input type="hidden" id="selected-tab-index" name="selected-tab-index" value="@(GetSelectedTabIndex())">


@helper TabInfo()
{
    <table class="adminContent">
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.Name):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.WidgetZone):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.WidgetZone)
                @Html.ValidationMessageFor(model => model.WidgetZone)
            </td>
            <td>
                <a href="http://www.nopcommerce.com/boards/t/25610/widgets-and-widgets-zones-in-310.aspx" target="_blank">Widget Zones List</a>
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.Published):
            </td>
            <td class="adminData">
                @Html.EditorFor(x => x.Published)
                @Html.ValidationMessageFor(model => model.Published)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.DisplayOrder):
            </td>
            <td class="adminData">
                @Html.EditorFor(x => x.DisplayOrder)
                @Html.ValidationMessageFor(model => model.DisplayOrder)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.CustomProductBox):
            </td>
            <td class="adminData">
                @Html.EditorFor(x => x.CustomProductBox)
                @Html.ValidationMessageFor(model => model.CustomProductBox)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.isHiddenNav):
            </td>
            <td class="adminData">
                @Html.EditorFor(x => x.isHiddenNav)
                @Html.ValidationMessageFor(model => model.isHiddenNav)
            </td>
            <td rowspan="6">
                @T("Plugins.Widgets.Carousel.Configure.Message")
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.NumberOfItems):
            </td>
            <td class="adminData">
                @Html.EditorFor(x => x.NumberOfItems)
                @Html.ValidationMessageFor(model => model.NumberOfItems)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.ItemMinWidth):
            </td>
            <td class="adminData">
                @Html.EditorFor(x => x.ItemMinWidth)
                @Html.ValidationMessageFor(model => model.ItemMinWidth)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.ItemMargin):
            </td>
            <td class="adminData">
                @Html.EditorFor(x => x.ItemMargin)
                @Html.ValidationMessageFor(model => model.ItemMargin)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.IsAutoRotate):
            </td>
            <td class="adminData">
                @Html.EditorFor(x => x.IsAutoRotate)
                @Html.ValidationMessageFor(model => model.IsAutoRotate)
            </td>
        </tr>
        <tr id="pnlIsAutoRotate">
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.AutoRotate):
            </td>
            <td class="adminData">
                @Html.EditorFor(x => x.AutoRotate)
                @Html.ValidationMessageFor(model => model.AutoRotate)
            </td>
        </tr>
    </table>
}

@helper TabPictures()
{
    @Html.Partial("~/Plugins/Widgets.Carousel/Views/_CreateOrUpdate.entity.cshtml", Model)
}
